Displaying Video

There are two different ways to incorporate video in your site:

1. Use the embed code from YouTube, Vimeo, or any other video sharing service that provides embed code
2. Upload the video to your site and install a video player as part of your site

Embedding Video

The easiest and least expensive way to use video on your site is to upload it to a sharing site and use that sites' embed code on your Webvanta site. This approach has a number of benefits:

• It makes it easier for your video to spread virally, since others can embed it on their site.
• Some people will find the video by searching on the sharing site.
• The sharing site will take care of converting whatever video format you have to one that is suitable for their video player.
• If you end up with a smash hit that gets millions of views, it still won't cost you a penny for the bandwidth.

Simply paste the embed code from the video site into an editable region of a page, the body of a KB item, a snippet, or even a template.

If you're going to have more than a few video items on your site, it's a good idea to use the knowledgebase to organize and present them. Create new items by choosing Content > Knowledgebase > New Item, and paste the embed code into the body of the item (be sure to switch the editor to code mode; if you paste the embed code in wysiwyg mode, you'll just display the code, not the video).

Hosting Your Own Video

Hosting your own video is a little more complex, and it can cause you to hit your bandwidth limits and thereby incur additional fees if you have a super-popular video. But it does give you more control over how the video is presented. For example, you can choose what controls are shown, what the controls look like, the resolution of the video, the compression applied, and so forth. We use this approach for most of our screencasts, because we want to use a resolution that isn't supported by video sharing services.

You can upload any video file just like an image, via Content > Images & Files. If you then place a link to that file on your site, visitors with an appropriate video player should see your video, but the results will vary from one computer to another, depending on what's installed. You can use this approach in a pinch with .mov files, which will play on most computers with Quicktime installed.

The only video player that is installed on nearly every computer, however, is Flash. Flash video is used by most video sites, including YouTube.

Flash video is stored in .flv files, which you can upload just like any other file. You can't simply link to the file, however; you need a Flash video player, which is a Flash program (.swf) that reads the video file and displays it, with whatever controls are designed into the player.

To create Flash video from other video formats, you need a Flash video encoder that runs on your computer. If you have Adobe's Flash authoring software, it comes with a video converter. There's a variety of other free and commercial converters available; search for "convert to flv" and you'll find lots of them.

Using the Preinstalled Flowplayer

Your initial Webvanta site comes preconfigured with a flexible, open-source Flash video player called Flowplayer (see www.flowplayer.org). There are a few pieces to Flowplayer:

• The standard Flowplayer JS file, which needs to be loaded in the head section of any page that includes a video player.
• Two Flowplayer .swf (Flash) files, which are invoked by the Flowplayer JS.
• An HTML element and a bit of JavaScript code on the page where you want to display the video.

In your starter site, there is a template called Single Column with Video. (If your site is missing this, you can get it from the cookbook.) This template includes the Flowplayer JS in the head section. Use this template for pages that include video, or add this line in the head section of whichever template you want to use:

<script src="/webvanta/js/flowplayer/3.1.1/flowplayer-3.1.1.min.js" type="text/javascript"></script> 

(The /webvanta folder is a shared folder of standard library files that is available to all Webvanta sites.)

Then, in the place on the page where you want to display the video, include code like the following:

<a href="videofile.flv" id="player"></a>
<script language="JavaScript">     
  flowplayer("player", "/webvanta/swf/flowplayer/3.1.1/flowplayer-3.1.1.swf");   
</script> 

The first line provides the pointer to the .flv file. Then the line of JavaScript invokes the Flowplayer code. It includes the ID of the element that has the pointer to the .flv as its first parameter, and the path to the Flowplayer .swf as the second parameter.

We've provided a snippet that includes this code, along with a bit of CSS to size and style the player element, in a snippet called flash_video_player. (If your site is missing this snippet, you can get it from the cookbook.) This snippet takes the .flv filename (without the .flv extension) as a parameter, as follows:

<w:snippet name="flash_video_player">filename</snippet>

That's all it takes to display Flash video on any page, as long as the page's template includes the Flowplayer JS file. Note that the CSS in the snippet sets the size of the video window, so be sure to edit that if you want a size other than 640 x 480.